import React, { useState } from "react";
import "./index.less";
import { Mask, SpinLoading, Toast } from "antd-mobile";
import { Spin } from "antd";
import { PageHeaderNew } from "@/components";
import { useNavigate } from "react-router-dom";
import BannerImg from "../../images/service/service-bg.png";
import List1 from "../../images/service/list-1.png";
import List2 from "../../images/service/list-2.png";
import List3 from "../../images/service/list-3.png";
import List4 from "../../images/service/list-4.png";
import { sendEvent } from "./service";
import { getCurrentUser } from "@/utils/authority";
type serviceListType = {
  id: number;
  name: string;
  url: string;
  img: any;
};
const CommunityService: React.FC = () => {
  const userId = getCurrentUser()?.data?.user_id;
  const [loading, setLoading] = useState<boolean>(false);
  const [list, _] = useState<serviceListType[]>([
    {
      id: 1,
      // name: "便民服务",
      name:'家政便民',
      img: List1, 
      url: "/communityServiceReport?convenienceService",
    },
    {
      id: 2,
      name: "物业服务",
      img: List2,
      url:"/communityServiceReport?propertyRepair",
    },
    {
      id: 3,
      name: "社区助餐",
      img: List3,
      url:"/communityServiceReport?communityMeal",
    },
    {
      id: 4,
      name: "健康服务",
      img: List4,
      url:"/communityServiceReport?healthService",
    },
  ]);
  const navigate = useNavigate();
  const clickEvent = async (data: serviceListType) => {
    setLoading(true);
    if (data.url) {
      navigate(data.url);
    }
    // const { success } = await sendEvent({ serviceCategory: data.name, userId });
    // if (success) {
    //   Toast.show({
    //     icon: "success",
    //     content: "服务申请成功",
    //   });
    //   setLoading(false);
    // }
  };

  return (
    <Spin tip="正在为你申请服务，请稍后..." spinning={loading}>
      <div className="servcie-contarnier">
        <div className="header-bg"></div>
        <PageHeaderNew title="社区服务" goBack={() => navigate(-1)} />
        <div className="service-box">
          <img src={BannerImg} className="service-box-banner" />
          <div className="service-box-list">
            {list.map((item) => {
              return (
                <div
                  key={item.id}
                  className="service-box-list-item"
                  onClick={() => clickEvent(item)}
                >
                  <img src={item.img} className="service-box-list-item-img" />
                  <span>{item.name}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </Spin>
  );
};

export default CommunityService;
